<template>
  <div class="container">
    <el-button type="info" plain icon="Sort" @click="toggleExpandAll">展开/折叠</el-button>

    <el-table :data="courseType" row-key="_id" v-if="refreshTable" :default-expand-all="isExpandAll" style="margin-top: 15px">
      <el-table-column prop="title" label="标题名称" />
      <el-table-column prop="name" label="分类标题" />
      <el-table-column label="是否需要审核">
        <template #default="scope">
          <div v-if="!scope.row.parentId">
            <el-tag type="success" v-if="scope.row.isExamine == 1">是</el-tag>
            <el-tag type="danger" v-else>否</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="是否统计获证">
        <template #default="scope">
          <div v-if="!scope.row.parentId">
            <el-tag type="success" v-if="scope.row.statisticsCertification == 1">是</el-tag>
            <el-tag type="danger" v-else>否</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="是否页面展示">
        <template #default="scope">
          <el-tag type="danger" v-if="isShowPage(scope.row)">否</el-tag>
          <el-tag type="success" v-else>是</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="230" align="center">
        <template #header>
          <el-button type="primary" size="small" circle @click="dialogVisible=true" icon="plus"></el-button>
        </template>
        <template #default="scope">
          <el-button type="primary" size="small" circle @click="handleEdit(scope.row, 1)" icon="plus"></el-button>
          <el-button type="primary" size="small" circle @click="handleEdit(scope.row, 3)" icon="Edit"></el-button>
          <el-button type="danger" size="small" circle @click="handleEdit(scope.row, 2)" icon="Delete"></el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-model="dialogVisible" title="新增/编辑课程分类" width="600" :before-close="handleClose">
      <el-form :model="courseParams">
        <el-form-item label="父级分类" v-if="courseParams.parentId">
          <el-input v-model="courseParams.parentName" placeholder="请输入父级分类" disabled clearable />
        </el-form-item>
        <el-form-item label="标题名称">
          <dictSelect dictCode="classification" v-model="courseParams.title" val="dict_label"></dictSelect>
        </el-form-item>
        <el-form-item label="分类名称">
          <el-input v-model="courseParams.name" placeholder="请输入分类名称" clearable />
        </el-form-item>
        <el-form-item label="是否页面展示">
          <el-radio-group v-model="courseParams.pageShow">
            <el-radio :value="1" :label="1">是</el-radio>
            <el-radio :value="0" :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否需要审核" v-if="!courseParams.parentId">
          <el-radio-group v-model="courseParams.isExamine">
            <el-radio :value="1" :label="1">是</el-radio>
            <el-radio :value="0" :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否统计获证" v-if="!courseParams.parentId">
          <el-radio-group v-model="courseParams.statisticsCertification">
            <el-radio :value="1" :label="1">是</el-radio>
            <el-radio :value="0" :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="save" :loading="loading">
            确 认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
const { proxy } = getCurrentInstance();
//counter
import useCounterStore from "@/store/counter";
import { fa } from "element-plus/es/locale";
import { ref } from "vue";
const counter = useCounterStore();

let courseType = ref([]); //课程分类
let formInline = ref({});
let dialogVisible = ref(false);
let courseParams = ref({
  name: "",
  parentId: "",
  parentName: "",
  title: "",
  isExamine: 0, //是否需要审核
  statisticsCertification: 0, //是否统计获证
  pageShow: 1, //是否前端页面展示
});
let courseList = [];
let loading = ref(false);
let isExpandAll = ref(false);
let refreshTable = ref(true);

onMounted(() => {
  getInfo();
});

/** 展开/折叠操作 */
function toggleExpandAll() {
  refreshTable.value = false;
  isExpandAll.value = !isExpandAll.value;
  nextTick(() => {
    refreshTable.value = true;
  });
}

function isShowPage(params) {
  let isShow = false;
  if (params.hasOwnProperty("pageShow") && params.pageShow == 0) isShow = true;
  return isShow;
}

async function getInfo() {
  courseList = await proxy.$apis.webCurriculum({
    type: "query",
  });
  courseType.value = proxy.$utils.transformArray(courseList, "_id", "parentId");
  console.log("courseType", courseType.value);
}

//多维数组转成一维数组
function flattenArray(arr) {
  let result = [];
  arr.forEach((item) => {
    result.push(item);
    if (item.children) {
      result = result.concat(flattenArray(item.children));
      delete item.children; // 可选，如果不想改变原数组结构可以不删除 children
    }
  });
  return result;
}

async function handleEdit(row, num) {
  switch (num) {
    case 1:
      courseParams.value.parentId = row._id;
      courseParams.value.parentName = row.name;
      dialogVisible.value = true;
      break;
    case 2:
      let arr = [row._id];
      let resp;
      if (row.children && row.children.length) {
        resp = await proxy.$utils.confirmTips(
          `是否确认删除分类${row.name}及其子分类?`
        );
        let newArr = flattenArray(proxy.$utils.deepcopy(row.children));
        console.log("newArr", newArr);
        newArr.forEach((element) => {
          arr.push(element._id);
        });
      } else {
        resp = await proxy.$utils.confirmTips(`是否确认删除分类${row.name}?`);
      }
      if (!resp) return;
      for (let index = 0; index < arr.length; index++) {
        const element = arr[index];
        await proxy.$apis.webCurriculum({
          type: "del",
          data: { _id: element },
        });
      }
      proxy.$utils.showToast("删除成功");
      getInfo();
      break;
    case 3:
      let query = { ...courseParams.value };
      courseParams.value = proxy.$utils.formatFunction(row, query);
      if (row.parentId) {
        let index = proxy.$utils.findIndexByField(
          courseList,
          "_id",
          row.parentId
        );
        courseParams.value.parentName = courseList[index].name;
      }
      courseParams.value._id = row._id;
      //console.log(row, courseParams.value);
      dialogVisible.value = true;
      break;
    default:
      break;
  }
}

async function save() {
  try {
    loading.value = true;
    await proxy.$apis.webCurriculum({
      type: courseParams.value.hasOwnProperty("_id") ? "update" : "add",
      data: courseParams.value,
    });
    proxy.$utils.showToast("保存成功");
    handleClose();
  } catch (error) {
  } finally {
    loading.value = false;
  }
}

function handleClose() {
  courseParams.value = {
    name: "",
    parentId: "",
    parentName: "",
    title: "",
    isExamine: 0, //是否需要审核
    pageShow: 1,
  };
  getInfo();
  dialogVisible.value = false;
}
</script>



<style lang="scss" scoped>
.container {
}
</style>






